<template>
    <div class="app">
        <h2>根组件App------>{{msg}}</h2>
        <Child></Child>
    </div>
</template>

<script>
import Child from './components/Child.vue'
import {reactive,toRefs,provide} from 'vue'
export default {
    components:{
        Child
    },
    setup(){
        const state=reactive({
            msg:'hello woniuxy'
        })
        /* 
                vue3中通过provide函数给后代组件发送信息,provide有两个参数
                参数1：可以是一个字符串，也可以是一个Symbol类型的数据，作用就是一个key
                参数2: 发送的数据
                在时候的时候，直接在setup中直接向下提供数据就可以了
            */
        provide('msg',state)
        return{
           ...toRefs(state)
        }
    }
}
</script>

<style>
.app{
    padding: 20px;
    background-color: pink;
}
</style>